<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <style>
        #snapshots {
            position: absolute;
            left: 10px;
            top: 60px;
            margin-top: 20px;
            overflow-y: scroll;
            height: calc(100% - 120px);
            margin-bottom: 10px;
            width: 230px;
            pointer-events: all;
            opacity: 0.8;
        }

        #mySectionPlanesOverviewCanvas {
            position: absolute;
            width: 250px;
            height: 250px;
            bottom: 70px;
            right: 10px;
            z-index: 200000;
        }
    </style>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div id="snapshots"></div>
<canvas id="mySectionPlanesOverviewCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../../assets/images/section_plane_icon.png"/>
    <h1>SectionPlanesPlugin</h1>
    <h2>Capturing PNG Screenshots</h2>
    <p>Demonstrates taking a canvas snapshot after creating SectionPlanes with a SectionPlanesPlugin. Note how the
        SectionPlanesPlugin's SectionPlane editing gizmo is not included in the snapshot.</p>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>

        </li>
        <li>
            <a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
               target="_other">SectionPlanesPlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="https://github.com/openBIMstandards/DataSetSchependomlaan"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, XKTLoaderPlugin, SectionPlanesPlugin} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-5.02, 2.22, 15.09];
    viewer.camera.look = [4.97, 2.79, 9.89];
    viewer.camera.up = [-0.05, 0.99, 0.02];
    viewer.camera.project.fov = 45;

    viewer.camera.zoom(5);

    //------------------------------------------------------------------------------------------------------------------
    // Add a XKTModelsPlugin - we'll use this to load the model geometry
    //------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    //------------------------------------------------------------------------------------------------------------------
    // Add a SectionPlanesPlugin - we'll use this to create cross-section planes
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlanes = new SectionPlanesPlugin(viewer, {
        overviewCanvasId: "mySectionPlanesOverviewCanvas",
        overviewVisible: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // Load the .xkt model and IFC metadata
    //------------------------------------------------------------------------------------------------------------------

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt", // Creates a MetaObject instances in scene.metaScene.metaObjects
        edges: true,
        backfaces: true // Sometimes it's best to show backfaces, so that sliced objects look less odd
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a couple of SectionPlanes.
    // Show the editing gizmo for one of our SectionPlanes. That will not appear in the screenshot.
    //------------------------------------------------------------------------------------------------------------------

    sectionPlanes.createSectionPlane({
        id: "mySectionPlane",
        pos: [1.04, 1.95, 9.74],
        dir: [1.0, 0.0, 0.0]
    });

    sectionPlanes.createSectionPlane({
        id: "mySectionPlane2",
        pos: [2.30, 4.46, 14.93],
        dir: [0.0, -0.09, -0.79]
    });

    sectionPlanes.showControl("mySectionPlane2");

    //------------------------------------------------------------------------------------------------------------------
    // When model loaded, start capturing PNG screenshots
    //------------------------------------------------------------------------------------------------------------------

    sceneModel.on("loaded", function () {

        const screenshotsDiv = document.getElementById("snapshots");
        var numScreenshots = 0;

        setInterval(() => {

            if (numScreenshots++ > 5) {
                return;
            }

            viewer.camera.orbitYaw(10);

            const canvas = viewer.scene.canvas;
            const canvasElement = canvas.canvas;
            const aspect = canvasElement.height / canvasElement.width;
            const width = 200;
            const height = Math.floor(width * aspect);

            const imageData = viewer.getSnapshot({
                format: "png",
                width: width,
                height: height
            });

            const img = document.createElement("img");

            img.src = imageData;
            img.style.border = "1px solid #000000";
            img.style.background = "lightblue";

            screenshotsDiv.appendChild(img);

        }, 1000);
    });


    window.viewer = viewer;
</script>

</html>
